<template>
  <div class="item_wrap">
    <div class="flex-1 overflow-hidden pl-50">
      <a-scrollbar style="height: 100%; overflow-y: auto">
        <a-form ref="formRef" :model="form" style="width: 70%" size="medium" auto-label-width>
          <a-form-item v-for="(item, index) in config" :key="index" :field="item.group" :label="item.name">
            <a-input v-model="form[item.code]" :placeholder="`请输入${item.name}`" />
          </a-form-item>
        </a-form>
      </a-scrollbar>
    </div>
    <div class="mb-m pt-m pl-40" style="box-shadow: 0 -5px 8px -5px rgba(0, 0, 0, 0.1); height: 40px">
      <a-space>
        <a-button @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import { searchConfig, editTripartiteConfig } from '@/apis'
const formRef = ref()
const form = reactive({})
const config = ref([])
// 获取详情
const getSearchConfig = async (id) => {
  const res = await searchConfig()
  config.value = res.data
  config.value.forEach((element) => {
    form[element.code] = element.value
  })
}
getSearchConfig()
// 保存
const onSubmit = async () => {
  await editTripartiteConfig({
    ...form
  })
  Message.success('保存成功')
}
// 重置
const onReset = () => {
  getSearchConfig()
  Message.success('重置成功')
}
</script>
<style lang="scss" scoped>
.item_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: $padding;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
:deep(.arco-space) {
  .arco-form-item-label-col {
    flex: auto !important;
  }
}
.nowrap {
  color: red;
}
:deep(.arco-scrollbar) {
  height: 100%;
}
</style>
